@import "../../styles/index.scss";

// loading公共样式
@mixin commonLoading {
  .le-loadingIndicator {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 4px;
    border-radius: 8px;
    border-color: #fff #fff #fff transparent;
    border-style: solid;
    border-width: 2px;
    animation: le-spin 1s infinite linear;
  }
}

.le-button {
  box-sizing: border-box;
  line-height: $lineHeight;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: $fontSize;
  border: 1px solid $border;
  color: $text;
  padding: 0.5em 1em;
  background-color: #fff;
  border-radius: $borderRadiusLight;
  cursor: pointer;
  outline: none;
  height: $btnHeight;

  &:hover {
    color: $primary;
    border: 1px solid $primary;
    opacity: 0.9;
  }

  &.le-btn-disabled {
    &:hover {
      border: 1px solid $disabledColor;
      color: $text;
    }
  }

  @include commonLoading;
  .le-loadingIndicator {
    border-color: $primary $primary $primary transparent;
  }
}

.le-btn-primary {
  background-color: $primary;
  color: #fff;

  &:hover {
    color: #fff;
  }

  &.le-btn-disabled {
    border: 1px solid $disabled;

    &:hover {
      border: 1px solid $disabled;
      color: #fff;
    }
  }
  .le-loadingIndicator {
    border-color: #fff #fff #fff transparent;
  }
}

.le-btn-dashed {
  border: 1px dashed $border;

  &:hover {
    color: $primary;
    border: 1px dashed $border;
  }

  &.le-btn-disabled {
    border: 1px dashed $disabledColor;

    &:hover {
      border: 1px dashed $disabledColor;
      color: $text;
    }
  }
}

.le-btn-success {
  background-color: $success;
  color: #fff;

  &:hover {
    color: #fff;
    border: 1px solid $success;
  }

  &.le-btn-disabled {
    border: 1px solid $disabled;

    &:hover {
      border: 1px solid $disabled;

      color: #fff;
    }
  }
  .le-loadingIndicator {
    border-color: #fff #fff #fff transparent;
  }
}

.le-btn-warning {
  background-color: $warning;
  color: #fff;

  &:hover {
    color: #fff;
    border: 1px solid $warning;
  }

  &.le-btn-disabled {
    border: 1px solid $disabled;

    &:hover {
      border: 1px solid $disabled;

      color: #fff;
    }
  }
  .le-loadingIndicator {
    border-color: #fff #fff #fff transparent;
  }
}

.le-btn-error {
  background-color: $error;
  color: #fff;

  &:hover {
    color: #fff;
    border: 1px solid $error;
  }

  &.le-btn-disabled {
    border: 1px solid $disabled;

    &:hover {
      border: 1px solid $disabled;

      color: #fff;
    }
  }
  .le-loadingIndicator {
    border-color: #fff #fff #fff transparent;
  }
}

.le-btn-text {
  background-color: #fff;
  border: none;

  &:hover {
    color: $primary;
    border: none;
  }

  &.le-btn-disabled {
    color: $disabled;

    &.le-btn-disabled {
      color: $text;

      &:hover {
        color: $text;
        border: none;
      }
    }
  }
}

.le-btn-info {
  background-color: $info;
  color: #fff;

  &:hover {
    color: #fff;
    border: 1px solid $info;
  }

  &.le-btn-disabled {
    border: 1px solid $disabled;

    &:hover {
      border: 1px solid $disabled;
      color: #fff;
    }
  }
  .le-loadingIndicator {
    border-color: #fff #fff #fff transparent;
  }
}

.le-btn-disabled {
  opacity: 0.4;
  cursor: no-drop;

  &:hover {
    opacity: 0.4;
  }

  > * {
    pointer-events: none;
  }
}

.le-btn-small {
  font-size: $fontSizeSmall;
  line-height: $lineHeightSmall;
  height: $btnHeightSmall;
}

.le-btn-large {
  font-size: $fontSizeLarge;
  line-height: $lineHeightLarge;
  height: $btnHeightLarge;
}

.le-btn-group {
  display: inline-block;
  & > .le-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  & > :first-child {
    border-top-left-radius: $borderRadiusLarge;
    border-bottom-left-radius: $borderRadiusLarge;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  & > :last-child {
    border-top-right-radius: $borderRadiusLarge;
    border-bottom-right-radius: $borderRadiusLarge;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

.le-loadingIndicator {
  border-color: #fff #fff #fff transparent;
}
